<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-select class="filter-item" v-model="queryParams.groupId" placeholder="全部门站" @change="selectGroupChange">
            <el-option v-for="item in  groups" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select class="filter-item" v-model="queryParams.sn" placeholder="全部仪表" @change="selectSNChange">
            <el-option v-for="item in  deviceList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-col>
        <el-col :span="16">
          <el-date-picker class="filter-item"
                          v-model="queryParams.date" type="date"
                          :value-format="format"
                          :format="format"
                          placeholder="选择终止日期">
          </el-date-picker>

          <el-switch
            v-model="queryParams.way"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="自动"
            inactive-text="换表方式">
          </el-switch>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <div class="ww-border four-corner" :id="'watch-'+ i" v-for="(item,i) in opitonList"
           :style="{width: '100%', height: '300px'}">

      </div>
    </el-row>

    <!-- 设备注册 -->
  </div>
</template>

<script>
  import {fetchList} from '../../api/group'
  import {fetchDeviceList} from '../../api/device'
  import {months, hours} from '../config/index'
  import {disDatas} from './data'

  export default {
    name: 'gas-jiance',
    directives: {},
    data() {
      return {
        time: null,
        rgLoading: null,
        groups: [],
        selectRowData: {},
        tableData: [],
        deviceList: [],
        tableKey: 0,
        opitonList: [{name: '仪表001'}],
        list: [],
        format: 'yyyy-MM-dd HH:mm:ss',
        queryParams: {
          date: new Date(),
          way: '',
          groupId: '',
          sn: '',
          pageNumber: 1,
          pageSize: 10
        },
        total: 0,
        listLoading: true,
        temp: {
          id: '',
          name: ''
        },
        rgParam: {
          sn: '',
          groupId: ''
        },
        textMap: {
          update: '编辑',
          create: '创建'
        },
        dialogPvVisible: false,
        pvData: [],
        rules: {
          sn: [{required: true, message: 'sn必填', trigger: 'blur'}],
          groupId: [{required: true, message: 'sn必填', trigger: 'blur'}]
        }
      }
    },
    filters: {},
    created() {
      this.getGroups()
    },
    mounted() {
      const data = disDatas.map((val) => {
        return (val * 10)
      })
      console.log(data)
      this.handleMounted(hours, data)
    },
    methods: {
      selectGroupChange(groupId) {
        this.queryParams.groupId = groupId
        this.queryParams.pageNumber = 1
        this.getDevices()
      },
      getDevices() {
        fetchDeviceList(this.queryParams).then(data => {
          this.list = data.data.content
          this.total = data.data.totalElements
        })
      },
      getGroups() {
        this.listLoading = true
        fetchList().then(data => {
          if (data.data.length === 0) {
            this.$message.error('请先新建门站！')
          }
          this.groups = data.data
          this.rgParam.groudId = this.groups[0] ? this.groups[0].id : ''
          this.queryParams.groupId = this.groups[0] ? this.groups[0].id : ''
          this.getDevices()
          this.listLoading = false
        })
      },
      handleCurrentChange(val) {
        this.queryParams.pageNumber = val
        this.getDevices()
      },
      handleMounted(x, y) {
        const dataAxis = x
        const data = y
        const yMax = 1.0
        const dataShadow = []

        for (var i = 0; i < data.length; i++) {
          dataShadow.push(yMax)
        }
        const option = {
          title: {
            text: '仪表001流量分布分析',
            left: 'center',
            textStyle: {
              align: 'center',
              color: '#fff',
              width: '100%',
              fontSize: 20
            }
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              inside: false,
              textStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 10
          },
          yAxis: {
            // interval: 3,

            // axisLine: {
            //   show: false
            // },
            // axisTick: {
            //   show: false
            // },
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            },
            data: ['0', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
            type: 'category',
            splitLine: {
              show: true
            },
            splitArea: {
              show: true,
              interval: (index, value) => {
                console.log(value)
                if (index) {
                  if (index === 2) {
                    return true
                  }
                  else if (index === 9) {
                    return true
                  } else {
                    return false
                  }
                }
                return false
              },
              areaStyle: {
                color: ['rgba(255,18,33,0.30)', 'rgba(126,211,33,0.30)', 'rgba(248,207,7,0.30)']
              }
            }
          },
          series: [
            { // For shadow
              type: 'bar',
              itemStyle: {
                color: 'rgba(0,153,255,0.0)',
                borderRadius: 2
                // borderWidth: 2,
                // borderColor: '#0099FF'
                // normal: { color: 'rgba(0,0,0,0.05)' }
              },
              barGap: '-100%',
              barCategoryGap: '40%',
              data: dataShadow,
              animation: false
            },
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: '#FFF'
              },
              itemStyle: {
                color: 'rgba(0,153,255,0.30)',
                borderWidth: 2,
                borderColor: '#0099FF',
                borderRadius: 2,

                // normal: { color: 'rgba(0,0,0,0.05)'
                emphasis: {
                  color: 'rgba(0,153,255,0.30)'
                }
              },
              data: data
            }
          ]
        }
        const chat = this.$echarts.init(document.getElementById('watch-0'))
        // 绘制图表
        chat.setOption(option)
      },
      selectSNChange() {
        this.search()
      }
    }
  }
</script>
<style lang="css" scoped>
  .el-switch__label {
    color: white;
  }
</style>
